<!-- src/components/DataChart/BarChart.vue -->
<template>
    <div ref="chartContainer" class="bar-chart-container"></div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount, watch } from 'vue';
import * as echarts from 'echarts';

// 定义组件属性（全部设为可选以提高灵活性）
interface Props {
    // 图表标题
    title?: string;
    // X轴数据
    xAxisData?: (string | number)[];
    // Y轴数据
    seriesData?: (string | number)[];
    // 多系列数据（支持多个数据系列）
    seriesList?: Array<{
        name: string;
        data: (string | number)[];
        type?: string;
    }>;
    // Y轴名称
    yAxisName?: string;
    // X轴名称
    xAxisName?: string;
    // 图表高度
    height?: string;
    // 图表宽度
    width?: string;
    // Y轴最小值
    yAxisMin?: number;
    // Y轴最大值
    yAxisMax?: number;
    // 是否显示图例
    showLegend?: boolean;
    // 图表方向 ('vertical' | 'horizontal')
    orientation?: 'vertical' | 'horizontal';
    // 全局默认颜色配置
    defaultColors?: string[];
    // 全局悬停颜色配置
    defaultEmphasisColors?: string[];
}

// 设置默认值
const props = withDefaults(defineProps<Props>(), {
    title: '',
    xAxisData: () => [],
    seriesData: () => [],
    seriesList: () => [],
    yAxisName: '',
    xAxisName: '',
    height: '400px',
    width: '100%',
    yAxisMin: undefined,
    yAxisMax: undefined,
    showLegend: false,
    orientation: 'vertical',
    defaultColors: undefined,
    defaultEmphasisColors: undefined

});

const chartContainer = ref<HTMLElement | null>(null);
let myChart: echarts.ECharts | null = null;

// 初始化图表
const initChart = async () => {
    if (!chartContainer.value) return;

    myChart = echarts.init(chartContainer.value);
    updateChart();
};

// 更新图表
const updateChart = async () => {
    if (!myChart) return;

    try {
        // 处理数据系列
        let seriesConfig: any[] = [];


        // 检查是否传入了多系列数据（seriesList）
        if (props.seriesList && props.seriesList.length > 0) {
            // 使用 map 方法遍历 seriesList 数组，为每个数据系列生成配置
            seriesConfig = props.seriesList.map((series, index) => ({
                // 系列名称，用于图例和提示框显示
                name: series.name,

                // 图表类型，默认为 'bar'（柱状图）
                type: series.type || 'bar',

                // 实际的数据值数组
                data: series.data,

                // 柱条的宽度，设置为容器宽度的60%
                barWidth: '60%',

                // 普通状态下的样式配置
                itemStyle: {
                    // 设置渐变色填充
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        // 渐变起始颜色（顶部）
                        { offset: 0, color: Array.isArray(props.defaultColors) ? props.defaultColors[0] : getColorByIndex(index, 'start') },
                        { offset: 0.5, color: Array.isArray(props.defaultColors) ? props.defaultColors[1] : getColorByIndex(index, 'middle') },
                        { offset: 1, color: Array.isArray(props.defaultColors) ? props.defaultColors[2] : getColorByIndex(index, 'end') }
                    ])
                },

                // 鼠标悬停时的强调状态样式配置
                emphasis: {
                    itemStyle: {
                        // 设置悬停时的渐变色填充
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            // 悬停状态渐变起始颜色
                            { offset: 0, color: Array.isArray(props.defaultEmphasisColors) ? props.defaultEmphasisColors[0] : getColorByIndex(index, 'emphasisStart') },
                            { offset: 0.7, color: Array.isArray(props.defaultEmphasisColors) ? props.defaultEmphasisColors[1] : getColorByIndex(index, 'emphasisMiddle') },
                            { offset: 1, color: Array.isArray(props.defaultEmphasisColors) ? props.defaultEmphasisColors[2] : getColorByIndex(index, 'emphasisEnd') }
                        ])
                    }
                }
            }));
        }
        // 如果传入了单系列数据
        else if (props.seriesData && props.seriesData.length > 0) {
            seriesConfig = [{
                name: '数据',
                type: 'bar',
                data: props.seriesData,
                barWidth: '60%',
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: '#83bff6' },
                        { offset: 0.5, color: '#188df0' },
                        { offset: 1, color: '#188df0' }
                    ])
                },
                emphasis: {
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: '#2378f7' },
                            { offset: 0.7, color: '#2378f7' },
                            { offset: 1, color: '#83bff6' }
                        ])
                    }
                }
            }];
        }

        const option = {
            title: {
                text: props.title,
                left: 'center',
                textStyle: {
                    fontSize: 16,
                    fontWeight: 'bold'
                }
            },
            legend: props.showLegend ? {
                data: seriesConfig.map(series => series.name),
                top: 'bottom'
            } : undefined,
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                left: '8%',      // 增加左侧间距
                right: '8%',     // 增加右侧间距
                bottom: '15%',   // 增加底部间距
                containLabel: true
            },
            xAxis:
            {
                type: 'category',
                data: props.xAxisData,
                axisTick: {
                    alignWithLabel: true
                },
                name: props.xAxisName,
                nameLocation: 'middle',
                nameGap: 30
            },
            yAxis:
            {
                type: 'value',
                name: props.yAxisName,
                min: props.yAxisMin,
                max: props.yAxisMax
            },
            series: seriesConfig
        };

        myChart.setOption(option);
    }
    catch (error) {
        console.error('更新图表失败:', error);
    }
};

// 根据索引获取颜色
const getColorByIndex = (index: number, type: string): string => {
    const colorSets = [
        { start: '#83bff6', middle: '#188df0', end: '#188df0', emphasisStart: '#2378f7', emphasisMiddle: '#2378f7', emphasisEnd: '#83bff6' },
        { start: '#ff7c7c', middle: '#ff5c5c', end: '#ff5c5c', emphasisStart: '#ff3c3c', emphasisMiddle: '#ff3c3c', emphasisEnd: '#ff7c7c' },
        { start: '#9fe080', middle: '#7fcd60', end: '#7fcd60', emphasisStart: '#5fb940', emphasisMiddle: '#5fb940', emphasisEnd: '#9fe080' }
    ];

    const colorSet = colorSets[index % colorSets.length];
    return colorSet[type as keyof typeof colorSet] || '#83bff6';
};

// 窗口大小调整处理
const handleResize = () => {
    if (myChart) {
        myChart.resize();
    }
};

// 监听属性变化
watch(() => [
    props.xAxisData, // x轴数据
    props.seriesData, // series数据 
    props.seriesList, // 
    props.title, // 标题
    props.yAxisMin, // y轴最小值
    props.yAxisMax, // y轴最大值
    props.showLegend,   // 显示图例
    props.orientation   // 显示方向
], () => {
    updateChart();
});

onMounted(() => {
    initChart();
    window.addEventListener('resize', handleResize);
});

onBeforeUnmount(() => {
    window.removeEventListener('resize', handleResize);
    if (myChart) {
        myChart.dispose();
    }
});
</script>

<style scoped>
.bar-chart-container {
    width: v-bind(width);
    height: v-bind(height);
    margin: 0 auto;
}
</style>